import {defineComponent, reactive} from "vue";
import ComGis from "@/components/gis/index";
import {LayoutSlider} from "@/layouts";
import {LayoutButton, LayoutTitle, ModalCom} from "@/components";
import CardCom from "./card.tsx"
import "./index.scss"

export default defineComponent({
    name: 'over-view',
    setup() {
        const sliderTable = []
        const state = reactive({
            modalVisible: false
        })
        return () => (
            <>
                <ComGis></ComGis>
                {
                    state.modalVisible ? (
                        <ModalCom
                            v-slots={{
                                header: () => (<LayoutTitle>系统信息</LayoutTitle>),
                                footer: () => (<>
                                    <span onClick={() => state.modalVisible = false}>返回</span>
                                    <span>保存</span>
                                </>)
                            }}
                        >
                            123
                        </ModalCom>
                    ) : ''
                }
                <LayoutSlider>
                    {/* 情况上报 */}
                    <CardCom
                        v-slots={{
                            title: () => '响应情况',
                            action: () => <span
                                onClick={() => state.modalVisible = true}>新增响应</span>,
                        }}>
                        <div>
                            <span>防汛抗台应急响应</span>
                            <div>
                                <span>进度：1/19</span>
                                <span>
                                    <LayoutButton>调整</LayoutButton>
                                    <LayoutButton>结束</LayoutButton>
                                </span>
                            </div>
                        </div>
                    </CardCom>
                    <CardCom
                        v-slots={{
                            title: () => '情况上报'
                        }}>
                        <h4 class={'slider-card__title'}>事前</h4>
                        <div class={"slider-card__content"}>
                            <span class={'slider-card__item'}>重要点位清单</span>
                            <span class={'slider-card__item'}>应急力量清单</span>
                            <span class={'slider-card__item'}>应急物资清单</span>

                        </div>
                        <h4 class={'slider-card__title'}>事中</h4>
                        <div class={"slider-card__content"}>
                            <span class={'slider-card__item'}>应急设备清单</span>
                            <span class={'slider-card__item'}>值班值守上报</span>
                            <span class={'slider-card__item'}>响应期间运营情况报表</span>
                            <span class={'slider-card__item'}>应急响应情况表</span>
                            <span class={'slider-card__item'}>紧急突发事件上报</span>
                        </div>
                    </CardCom>
                    <CardCom
                        v-slots={{
                            title: () => '值班人员',
                        }}>
                        <div class={'card-item__container'}>
                            <span>城投值班长</span>
                            <LayoutButton>编辑</LayoutButton>
                        </div>
                    </CardCom>
                    <CardCom
                        v-slots={{
                            title: () => '应急元素',
                        }}>
                        <div class={"card-content__wrapper"}>
                            <div class={'card-item__container'}>
                                <h4 class={'card-item__title'}>应急设备</h4>
                                <LayoutButton size="larger">14类 / 1851台</LayoutButton>
                            </div>
                            <div class={'card-item__container'}>
                                <h4 class={'card-item__title'}>应急队伍</h4>
                                <LayoutButton size="larger">508支 / 4906人</LayoutButton>
                            </div>
                            <div class={'card-item__container'}>
                                <h4 class={'card-item__title'}>应急车辆</h4>
                                <LayoutButton size="larger">190台</LayoutButton>
                            </div>
                            <div class={'card-item__container'}>
                                <h4 class={'card-item__title'}>应急物资</h4>
                                <LayoutButton size="larger">21类/126388.39件</LayoutButton>
                            </div>
                        </div>
                    </CardCom>
                    <CardCom
                        v-slots={{
                            title: () => '重点要害部位',
                        }}
                    >
                        <div class={"card-content__wrapper"}>
                            <div class={'card-item__container'}>
                                <h4 class={'card-item__title'}>要害部位</h4>
                                <LayoutButton size="larger">197个</LayoutButton>
                            </div>
                            <div class={'card-item__container'}>
                                <h4 class={'card-item__title'}>巡查数</h4>
                                <LayoutButton size="larger">0个</LayoutButton>
                            </div>
                            <div class={'card-item__container'}>
                                <h4 class={'card-item__title'}>隐患数</h4>
                                <LayoutButton size="larger">0个</LayoutButton>
                            </div>
                            <div class={'card-item__container'}>
                                <h4 class={'card-item__title'}>整改数</h4>
                                <LayoutButton size="larger">0个</LayoutButton>
                            </div>
                        </div>
                    </CardCom>
                    <CardCom
                        v-slots={{
                            title: () => (<span>响应处理</span>)
                        }}
                    >

                    </CardCom>
                </LayoutSlider>
            </>
        )
    }
});
